<template>
  <div class="box">
    <el-form
      :model="parkData"
      ref="form"
      label-width="80px"
      :inline="false"
      size="default"
      :props="{
        label: (data) => {
          console.log('data', data)
          // return data.meta.title
        }
      }"
    >
      <el-form-item label="公园名称" prop="name">
        <el-input v-model="parkData.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="公园面积（亩）" prop="area" label-width="100px">
        <el-input v-model.number="parkData.area" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="公园类型" prop="type">
        <el-input v-model="parkData.type" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="园区级别" prop="rank">
        <el-input v-model="parkData.rank" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="最大客容量（人次）" prop="visitor" label-width="130px">
        <el-input v-model.number="parkData.visitor" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="车位数" prop="number">
        <el-input v-model.number="parkData.number" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="开放时间">
        <el-col :span="11">
          <el-form-item prop="time">
            <el-time-picker v-model="parkData.time" placeholder="请输入" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="time">
            <el-time-picker v-model="parkData.time" placeholder="请输入" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="公园简介" prop="intro">
        <el-input v-model="parkData.intro" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="公园地址" prop="address">
        <el-input v-model="parkData.address" readonly placeholder="请选择公园地址" />
        <p>提示：在地图上单击鼠标左键选择位置！</p>
        <Map v-model="parkData.address" />
        <!-- <button @click="handleClick">查看经纬度</button> -->
      </el-form-item>
      <el-form-item el-form-item>
        <el-button type="success" @click="onSubmit" v-if="edata">确认修改</el-button>
        <el-button type="primary" @click="onSubmit" v-else>立即新增</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import Map from './map.vue'
// import { ref } from 'vue'
import { parkPut, parkAdd } from '../../../api/Park/park'
import { onMounted, ref } from 'vue'
import { useParkData } from '@/store/map'
const emit = defineEmits()
// const handleClick = ()=> {
//   console.log('经纬度', parkData);
// }
const getLng = useParkData()
interface parkDataType {
  address: string
  name: string
  area: number
  type: string
  number: number
  rank: string
  time: string
  visitor: number
  objectId?: string
  intro: string
  lng: number
  lat: number
}

const parkData: parkDataType = reactive<parkDataType>({
  name: '',
  address: '',
  area: 0,
  type: '',
  number: 0,
  rank: '',
  time: '',
  visitor: 0,
  intro: '',
  lng: 0,
  lat: 0
})

// 新增
const onSubmit = () => {
  if (props.edata) {
    console.log('表单信息', parkData)
    // 编辑
    let { objectId } = props.edata
    console.log(objectId, 9636)
    parkPut(objectId!, parkData).then(() => {
      emit('update:table-data', {
        ...parkData,
        objectId
      })
    })
  } else {
    parkData.lng = getLng.lngLat!.lng
    parkData.lat = getLng.lngLat!.lat
    // console.log("表单", useParkData.lngLat!.lat)
    parkAdd(parkData).then((res) => {
      emit('update:table-data', {
        ...parkData,
        objectId: res.data.objectId
      })
    })
  }
}

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: parkDataType | null
}
const props = defineProps<PropsType>()
// console.log("接收到了父级的props", props.edata);
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    let { address, name, area, type, number, rank, time, visitor, intro, lng, lat } = props.edata
    parkData.name = name
    parkData.address = address
    parkData.area = area
    parkData.type = type
    parkData.number = number
    parkData.rank = rank
    parkData.time = '2023-11-11 09:10:30'
    parkData.visitor = visitor
    parkData.intro = intro
    parkData.lng = lng
    parkData.lat = lat
    console.log(time)

    // 修改
  } else {
    //点击到了新增按钮
    parkData.name = ''
    parkData.address = ''
    parkData.area = 0
    parkData.type = ''
    parkData.number = 0
    parkData.rank = ''
    parkData.time = '2023-11-11 09:10:30'
    parkData.visitor = 0
    parkData.intro = ''
    parkData.lng = 0
    parkData.lat = 0
  }
})
</script>

<style scoped>
.box :deep(.el-form-item__label) {
  box-sizing: content-box;
  width: 100px;
}
</style>
